<template>
  <!--<div class='search'>-->
  <!--<mt-search-->
  <!--v-model='value'-->
  <!--cancel-text='取消'-->
  <!--placeholder='搜索'>-->
  <!--</mt-search>-->

  <!--<mt-search v-model='value'>-->
  <!--<mt-cell-->
  <!--v-for='item in result'-->
  <!--:key='item.id'-->
  <!--:title='item.title'-->
  <!--:value='item.value'-->
  <!--&gt;-->
  <!--</mt-cell>-->
  <!--</mt-search>-->
  <mt-search v-model="value" :result.sync="result"></mt-search>

  <!--<div class='content'>-->
  <!--<h1>value is: {{ value }}</h1>-->
  <!--</div>-->
  </div>

</template>

<script>
  export default{
    fetchApi () {
      return {
        value: '',
//        result: ['Love', 'Living', 'lie', 'log']
        result: []
      }
    },
    watch: {
      /** value后面得加空格 // _.debounce 是一个通过 lodash 限制操作频率的函数。 */
      value (val) {
        console.log(this.value)
        /** 这个可以从服务器获取数据 */
        this.result = ['Love', 'Living', 'lie', 'log']
      }
    }
  }
</script>

<style scoped>
  .search .mint-searchbar-cancel {
    color: #b4282d;
  }

  /*h1 {*/
  /*margin-top: 100px;*/
  /*}*/
</style>
